<template>
	<view class="container">
		<uni-nav-bar @clickLeft="clickLeft" fixed="true" left-icon="arrowleft" title="网易云音乐" background-color="#d44439" color="white"></uni-nav-bar>
		<GeDanTouBu @userinfo="userinfo" :name="name" :coverImgUrl="coverImgUrl" :avatarUrl="avatarUrl" :nickname="nickname"></GeDanTouBu>
		<button @click="openPopup">查看评论</button>
		<BiaoQian :tags="tags"></BiaoQian>
		<JianJie :description="description"></JianJie>
		<GeQu @jump="jump" :tracks="tracks"></GeQu>
		<SouCang :subscribers="subscribers" :id="id"></SouCang>
		<uni-popup ref="popup" type="bottom">
			<view class="popupContainer">
				<view class="header">
					<h3>精彩评论</h3>
				</view>
				<view class="grey"></view>
				<view class="pinglun">
					<scroll-view scroll-y>
						<view class="pinglun_inside" v-for="(item,index) in comments" :key="index">
							<view class="img" @click="jumpUserinfo(item.user.userId)">
								<image :src="item.user.avatarUrl"></image>
							</view>
							<view class="contact">
								<view class="name" @click="jumpUserinfo(item.user.userId)">{{item.user.nickname}}</view>
								<view class="time">{{new Date(item.time).toLocaleString()}}</view>
								<view v-if="item.beReplied.length == 0" class="text">{{item.content}}</view>
								<view v-else class="text">
									回复
									<text style="color: #507daf;" @click="jumpUserinfo(item.beReplied[0].user.userId)">
										@{{item.beReplied[0].user.nickname}}
									</text>
									：{{item.content}}
								</view>
								<view class="huifu" v-for="(childitem,index) in item.beReplied">
									<text>@{{childitem.user.nickname}}:“{{childitem.content}}”</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import GeDanTouBu from '../../components/GeDanTouBu/GeDanTouBu.vue'
	import BiaoQian from '../../components/biaoqian/biaoqian.vue'
	import GeQu from '../../components/GeQu/GeQu.vue'
	import SouCang from '../../components/SouCang/SouCang.vue'
	import JianJie from '../../components/JianJie/JianJie.vue'
	import {
		detail,
		subscribers,
		playlist
	} from '../../api/AllGeDan/AllGeDan.js'
	export default {
		onLoad(option) {
			this.gedanInfo(option.id)
			this.soucangPoeple(option.id)
			this.GeDanPinglun(option.id)
		},
		data() {
			return {
				name: '',
				coverImgUrl: '',
				tags: [],
				description: '',
				tracks: [],
				avatarUrl: '',
				nickname: '',
				userid: null,
				subscribers: [],
				id: null,
				comments: []
			}
		},
		methods: {
			openPopup() {
				this.$refs.popup.open()
			},
			gedanInfo(id) {
				detail({
					id: id
				}).then(res => {
					this.name = res.playlist.name //歌单名字
					this.coverImgUrl = res.playlist.coverImgUrl //封面海报
					this.tags = res.playlist.tags //标签
					this.description = res.playlist.description //简介
					this.tracks = res.playlist.tracks //歌单
					//console.log(this.tracks)
					this.avatarUrl = res.playlist.creator.avatarUrl //作者头像
					this.nickname = res.playlist.creator.nickname //作者名字
					this.userid = res.playlist.creator.userId //作者ID
				})
			},
			soucangPoeple(id) {
				subscribers({
					id: id,
					limit: 5
				}).then(res => {
					console.log(res)
					this.subscribers = res.subscribers
					this.id = id
				})
			},
			GeDanPinglun(id) {
				playlist({
					id
				}).then(res => {
					this.comments = res.comments
					console.log(this.comments)
				})
			},
			jump(id) {
				uni.navigateTo({
					url: '../BoFangQi/BoFangQi?id=' + id
				})
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			userinfo() {
				uni.navigateTo({
					url: '../UserInfo/UserInfo?userid=' + this.userid
				})
			},
			jumpUserinfo(id) {
				uni.navigateTo({
					url: '../UserInfo/UserInfo?userid=' + id
				})
			}
		},
		components: {
			uniNavBar,
			GeDanTouBu,
			BiaoQian,
			JianJie,
			GeQu,
			SouCang
		}
	}
</script>

<style lang="scss">
	.container {
		width: 750rpx;

		.popupContainer {
			width: 100%;
			height: 1100rpx;
			background-color: white;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;

			.header {
				width: 100%;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.grey {
				width: 100%;
				height: 10rpx;
				background: rgba(0, 0, 0, .05);
			}

			.pinglun {
				width: 100%;
				height: 1030rpx;

				//background-color: yellow;
				scroll-view {
					width: 100%;
					height: 100%;

					.pinglun_inside {
						width: 100%;
						//height: 220rpx;
						//background-color: blue;
						display: flex;
						flex-wrap: wrap;
						margin-bottom: 10rpx;
						margin-top: 10rpx;

						.img {
							width: 60rpx;
							height: 60rpx;
							margin-right: 20rpx;
							//background-color: red;
							margin-left: 20rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 200rpx;
							}
						}

						.contact {
							height: 100%;
							//background-color: pink;
							width: 620rpx;
							padding-bottom: 20rpx;
							border-bottom: 1px solid rgba(0, 0, 0, .1);

							.name {
								font-size: 14px;
								color: #666;
								margin-bottom: 6rpx;
							}

							.time {
								font-size: 9px;
								color: #999;
							}

							.text {
								color: #333;
								font-size: 15px;
								margin-top: 5px;
							}

							.huifu {
								padding: 20rpx;
								margin-top: 10rpx;
								width: 576rpx;
								color: #888;
								font-size: 14px;
								border: 1px solid rgba(0, 0, 0, .1);
								display: flex;
								align-items: center;
							}
						}
					}
				}
			}
		}
	}
</style>
